
<!--基本语法：组件引入，基本指令（v-if,v-model） ，js函数的写法等-->
<template>
  <view class="container">1
    <text>{{name}}</text>
    <text>{{sex}}</text>

    <view>
      <text>水果总数：{{totalNum}}</text>
      <text>修改的水果数：{{fruit2Value}}</text>
      <text v-if="flag">
        hello world!
      </text>
      <text v-else>
        so bad!
      </text>
    </view>
    <view v-for="(item,indexNum) in fruitList" :key ="item.id">
      <text>{{item.name}}</text>
      <text @click ="numberAdd(indexNum)">{{item.count}}</text>
    </view>
  </view>

  <view>
    <button @click = "countadd">点击加1</button>
  </view>

  <view>
    <button @click="toNewBar">按钮(组件信息传递 & $emit)</button>
  </view>

  <!--全局引入-->
  <view>
    <my-component></my-component>
  </view>
  <!--局部引入-->
  <view>
    <my-component2></my-component2>
  </view>
  <view>
    <my-component3></my-component3>
  </view>
</template>


<script setup>
// vue 2 语法
// export default {

  // data() {
  //   return {
  //     name: "My Student"
  //   }
  // },
  // setup(){
  //   return {
  //     sex: "male"
  //   }
  // },
  //
  // methods: {
  //   //... vue2 的函数需要写在这个里面
  //
  // },
// }
//使用vue 3


import {ref,reactive, computed,watch} from  'vue'
import { onLoad } from '@dcloudio/uni-app'
//局部引入
import myComponent2  from "@/components/my-component3/my-component2.vue";

const flag = ref(false);
const name = ref('hello')
const sex = ref('male')
const  title = ref('这个是标题')


const  fruitList = reactive([{id: 1,name:"apple",count:4},
  {id:2,name:'pear',count:5}]);

//
const  countadd = ()=>{
  fruitList.forEach(item =>{
    item.count  ++;
  })
};

//累加
const  totalNum = computed(() =>{
  return fruitList.reduce((total,cur) => total + cur.count,0)
})

const fruit2Value = ref(fruitList[1].count);


//函数监听
watch(
    () => fruitList[1].count, // 监听的具体属性
    (newValue, oldValue) => {
      console.log(`第二个水果的数量从 ${oldValue} 变为 ${newValue}`);
     // console.log("打印该对象")
      fruit2Value.value = newValue; // 更新 ref 的值
    }
);

// watch(fruit2Value,  (newValue, oldValue) => {
//   console.log(`第二个水果的数量从 ${oldValue} 变为 ${newValue}`);
//   // console.log("打印该对象")
//   fruit2Value.value = newValue; // 更新 ref 的值
// })



const toNewBar = (()=>{
  uni.navigateTo({
    url:'/pages/mystu/index_props_emits'
  })
})






//这里的 numberAdd1 最终返回是undefine 除非有返回值
 const  numberAdd =  ((indexNum) =>{
   console.log("索引值" + indexNum)
 //  console.log("实际值" + fruitList(.value().count)
   fruitList[indexNum].count = fruitList[indexNum].count + 1;
 });

// function numberAdd(indexNum) {
//   console.log("索引值" + indexNum)
//   //  console.log("实际值" + fruitList(.value().count)
//   fruitList[indexNum].count = fruitList[indexNum].count + 1;
//
// }
  onLoad(() => {
    console.log("uiapp 自带生命周期函数");
  })





</script>

<style scoped lang="scss">

</style>